<template>
    <div id="box">
        <div id="header">
            <div></div>
            <span>用户信息</span>
            <router-link to='/home/login'><van-icon name="arrow-left" /></router-link>
        </div>
        <div id="bodyer">
            <div class="user">
                <div>
                    <div><img :src="user.avatar_url" alt=""></div>
                    <nav>
                        <span>{{user.githubUsername}}</span>
                        <p>{{user.create_at}}</p>
                    </nav>
                    <div>
                        <span><van-icon name="fire" />{{user.score}}</span>
                        <span><van-icon name="star" /></span>
                    </div>
                </div>
            </div>
            <div id="list_box">
                <div class="hh">
                    <p>最近回复</p>
                    <div v-show="user.recent_replies.length==0">暂无数据</div>
                    <nav class="lis" v-for="v,k in user.recent_replies" :key="k">
                        <div><img :src="v.author.avatar_url" alt=""></div>
                        <nav>
                            <span>{{v.author.loginname}}</span>
                            <p>{{v.title}}</p>
                        </nav>
                        <span>{{date(v.last_reply_at ).locale('zh-cn').fromNow()}}</span>
                    </nav>
                </div>
                <div class="zj">
                    <p>最近话题</p>
                    <div v-show="user.recent_topics.length==0">暂无数据</div>
                    <nav class="lis" v-for="v,k in user.recent_topics" :key="k">
                        <div><img :src="v.author.avatar_url" alt=""></div>
                        <nav>
                            <span>{{v.author.loginname}}</span>
                            <p>{{v.title}}</p>
                        </nav>
                        <span>{{date(v.last_reply_at ).locale('zh-cn').fromNow()}}</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
dayjs.extend(relativeTime);
export default {
    data(){
        return {
            user:{},
            date:''
        }
    },
    created(){
        let d = JSON.parse(window.localStorage.getItem('user'))
        this.axios('https://cnodejs.org/api/v1/user/'+d.loginname).then(res=>{
            console.log(res)
            this.user = res.data.data
        })
        this.date = dayjs

    }
}
</script>
<style lang="scss" scoped>
#box{
    width:100%;
    height:100vh;
    display: flex;
    flex-direction: column;
    >#header{
        height:.5rem;
        width:100%;
        background-image: linear-gradient(to right top  , #e9028d, #6937b5);
        position: relative;
         >span{
            font-size:.18rem;
            color: white;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom:.1rem;
        }
        >div{
            height: 0.5rem;;
        }
        >a{
            font-size:.2rem;
            color: #fff;
            position: absolute;
            left:0.04rem;
            bottom:.08rem;
        }
    }
    >#bodyer{
        flex-grow: 1;
        overflow: auto;
        background: #f1f1f1;
    }
}
.user{
    width:100%;
    padding:.1rem .14rem;
    background:white;
    box-sizing: border-box;
    >div{
        box-sizing: border-box;
        width:100%;
        height:.4rem;
        display: flex;
        font-size:.14rem;
        >div:nth-child(1){
            width:.4rem;
            height:.4rem;
            background:#cccccc;
            overflow: hidden;
            border-radius:.05rem;
            >img{
                width:100%;
            }
        }
        >nav{
            height:.4rem;
            width:2rem;
            margin-left:.07rem;
            display: flex;
            flex-wrap: wrap;
            >span{
                height:.2rem;
                line-height:.2rem;
            }
            >p{
                height:.2rem;
                width:100%;
                line-height:.2rem;
            }
        }
        >div:nth-child(3){
            width:1rem;
            position: relative;
            >span{
                position: absolute;
                font-size:.15rem;
            }
            >span:nth-child(1){
                height:.2rem;
                line-height: .2rem;
                color:red;
                top:50%;
                left:.1rem;
                transform: translateY(-50%);
            }
            >span:nth-child(2){
                right:.1rem;
                top:50%;
                color: #aaa;
                transform: translateY(-50%);
            }
        }
    }
}

#list_box{
    margin-top:.1rem;
    >div{
        box-sizing: border-box;
        padding:0px .14rem .1rem;
        background:white;
        >p{
            padding-top:.1rem;
            font-size:.16rem;
            height:.3rem;
            line-height:.3rem;
            border-bottom:1px solid #3333;
        }
    }
    >div+div{
        margin-top:20px;
    }
}

.lis{
    height: .4rem;
    width:100%;
    margin:.1rem 0px;
    display: flex;
    position: relative;
    >div{
        width:.4rem;
        height:.4rem;
        >img{
            width:100%;
        }
    }
    >span{
        position: absolute;
        right:0px;
        top:.05rem;
        font-size:.12rem;
        color:#aaa;
    }
    >nav{
        margin-left:.1rem;
        width:3.05rem;
        display: flex;
        flex-wrap: wrap;
        >span{
            height:.2rem;
            line-height: .2rem;
            font-size:.16rem;
            color: #8799a3;
        }
        >p{
            color: #aaaaaa;
            width: 100%;
            height:.2rem;
            line-height: .2rem;
            font-size:.14rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>